<template>
    <div id="div">
        <div class="fans">支付方式</div>
        <ul>
            <li><span class="yuan" @click="sd(0)"><span :class="this.ds==0?Classds:''"></span></span> <img src="" alt=""> <span>微信支付</span> </li>
            <li><span class="yuan" @click="sd(1)"><span :class="this.ds==1?Classds:''"></span></span> <img src="" alt=""> <span>支付宝</span> </li>
            <li><span class="yuan" @click="sd(2)"><span :class="this.ds==2?Classds:''"></span></span> <img src="" alt=""> <span>花呗分期</span> <span class="tuijian">大额支付推荐</span> </li>
        </ul>

        <div class="shifu">实付金额：<span>￥</span></div>
        <div class="button">
            <router-link to="">
                <button @click="liji">立即支付</button>
            </router-link>
        </div>
        <div class="xiayi">
            <input type="checkbox" v-model="checx">
            我已阅读并同意 <a href="javascript:;">云课堂用户付费协议</a>
        </div>


    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
	export default {
		name: "",
		data() {
			return {
                checx:true,
			    ds:2,
                Classds:'spn'
            }
		},
        created(){

        },
		methods:  {
            sd:function (d) {
                this.ds = d
            },
            liji:function () {
                if(this.checx != true){
                    Toast({
                        message: '请仔细阅读云课堂用户付费协议',
                        position: 'bottom',
                        duration: 5000
                    });
                }
            }
		}
	}
</script>

<style scoped>
    .tuijian{
        line-height: 16px;
        font-size: 10px;
        display: inline-block;
        color: #ff7034;
        border:1px solid #ff7034;
        border-radius:3px;
        padding:  0 5px;
    }

    #div {
        width: 100%;
        height:100%;
        background-color: white;
    }
    .fans{font-size: 14px;padding: 10px;background-color: #efeff4;}
    li{
        font-size: 14px;
        padding: 10px;
        border-bottom: 1px solid #e6eaf2;
        background-color: white;
    }
    li>img, li>span{vertical-align: middle}
    .yuan{
        position: relative;
        display: inline-block;
        border: 1px solid #e6eaf2;
        border-radius:50%;
        width: 16px;
        height: 16px;
        vertical-align: middle;
    }
    .yuan>span{
        position: absolute;
        left: 3px;
        top:3px;
        visibility:hidden;
        display: inline-block;
        width:8px ;
        height: 8px;
        background-color: black;
        border-radius: 50%;
    }
    .yuan>span.spn{visibility: visible}
    .shifu{
        margin: 40px 0 10px;
        font-size: 12px;
        padding: 10px;
    }
    .button{
        padding: 10px;
    }
    .button button{
        color: white;
        background-color: #ff7034;
        width: 100%}
    .xiayi{
        padding:0 10px;
        font-size: 12px;
    }
    .xiayi>input{
        vertical-align: middle}
    .xiayi>a{color: #1cc82f}
</style>
